<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
       <style>
         .a{
            width:200px;
            height:640px;
            margin:0;
            background-color:lightgrey;
            position:fixed;
         }
         .a p{
            color:aquamarine;
            margin-left: 10px;
         }
         .a a{
            color:aquamarine;
            text-decoration: none;
         }
        .b{
            margin-left: 200px;
            width:100%;
            float:left;
        }
        .b a{
            color:aquamarine;
            text-decoration:none;
        }
        .b p{
            width:800px;
        }
        #bg{background:r ;width:100%;height:35px;}
        nav{height:35px;width: 1000px;margin-left:200px;}
        nav ul li {list-style-type:none;float:left;width:auto;background-color: black;}
        nav ul li  a{text-decoration:none;display:block;width:130px;line-height:35px;
        text-align:center;color:aquamarine;}
        nav ul li ul li{float:none}
        nav ul li ul li a{color:
            aquamarine;margin-left: -50px;}
        nav ul li ul{display:none;}
        nav ul li:hover ul{display:block;}
        .d{
           
            margin-left:200px;

        }
        footer{
            position:absolute;
            text-align: center;
            top:1800px;
            background-color: lightgrey;
            color:aquamarine;
            width:2000px;
            height:30px;
            text-align:center;
        }
        footer p{
            position:absolute;
            left:600px;
            top:-15px;
        }
        
       </style>
    </head>
    <body>
      <div class="a">
        <p>菜单内容</p>
        <ul>
            <li ><a href="https://v.qq.com">腾讯视频</a></li>
            <li ><a href="http://www.baidu.com">百度</a></li>
            <li ><a href="https://www.bilibili.com">哔哩哔哩</a></li>
        </ul>
      </div>
      <div class="b">
        <img src=https://ts4.cn.mm.bing.net/th?id=OIP-C.OWjf53S03bHhciUkWl00TgHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2 style="width:800px; ;height:200px;margin:0 ;" />
        <a href="https://v.qq.com" style="position:absolute; left:300px; top:100px">腾讯视频</a>
        <a href="http://www.baidu.com"style="position:absolute; left:500px; top:100px">百度</a>
        <a href="https://www.bilibili.com"style="position:absolute; left:700px; top:100px" >哔哩哔哩</a>
        <a href="http://www.iqiyi.com/"style="position:absolute; left:900px; top:100px">爱奇艺</a>
        <p>真正的平静，不是避开车马喧嚣，而是在心中修篱种菊。尽管如流往事，每一天都涛声依旧，只要我们消除执念，
            便可寂静安然。愿每个人，在纷呈世相中不会迷失荒径，可以端坐磐石上，醉倒落花前。</p>
      </div>
      <div id="bg">
      <nav>
        <ul>
            <li><a href="">fruit</a>
                <ul>
                    <li><a href="">orange</a></li>
                    <li><a href="">apple</a></li>
                    <li><a href="">banana</a></li>
                </ul>
            </li>
            <li><a href="">drink</a>
                <ul>
                    <li><a href="">milk</a></li>
                    <li><a href="">juice</a></li>
                    <li><a href="">coffee</a></li>
                </ul>
            </li>
            <li><a href="">ballgame</a>
                <ul>
                    <li><a href="">basketball</a></li>
                    <li><a href="">football</a></li>
                    <li><a href="">baseball</a></li>
                </ul>
            </li>
            <li><a href="">hobby</a>
                <ul>
                    <li><a href="">running</a></li>
                    <li><a href="">eating</a></li>
                    <li><a href="">listening</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    </div>
    <div class="d" style="position:absolute;left:200px;top:500px;">
      <h1>这次作业好难啊</h1>
      <h2>一点也不会啊</h2>
      <h3>完全看不懂啊</h3>
    </div>
    <div class="d"style="position:absolute;left:200px;top:700px;">
        <h1>这次作业好难啊</h1>
        <h2>一点也不会啊</h2>
        <h3>完全看不懂啊</h3>
      </div>
      <div class="d"style="position:absolute;left:200px;top:900px;">
        <h1>这次作业好难啊</h1>
        <h2>一点也不会啊</h2>
        <h3>完全看不懂啊</h3>
      </div>
      <div class="d"style="position:absolute;left:200px;top:1100px;">
        <h1>这次作业好难啊</h1>
        <h2>一点也不会啊</h2>
        <h3>完全看不懂啊</h3>
      </div>
      <div class="d"style="position:absolute;left:200px;top:1300px;">
          <h1>这次作业好难啊</h1>
          <h2>一点也不会啊</h2>
          <h3>完全看不懂啊</h3>
        </div>
        <div class="d"style="position:absolute;left:200px;top:1500px;">
          <h1>这次作业好难啊</h1>
          <h2>一点也不会啊</h2>
          <h3>完全看不懂啊</h3>
        </div>
      <footer>
        <p>希望老师下次布点简单的作业</p>
      </footer>
    </body>
</html>